<template>
  <div class="food-recipe-form common-mobile-view">
    <h2 style="text-align: center; margin: 0;">
      {{ foodStore.recipeApiType === 'ADD' ? '新增菜谱' : '编辑菜谱' }}
    </h2>

    <el-steps :active="currentStepIndex"
              align-center finish-status="success">
      <el-step title="基础信息" />
      <el-step title="食材信息" />
      <el-step title="步骤信息" />
    </el-steps>

    <el-form ref="formRef" :model="foodStore.currentRecipe"
             :rules="rules" label-width="60px">
      <el-form-item v-if="currentStepIndex === 0" label="名称" prop="name">
        <el-input v-model="foodStore.currentRecipe.name" autocomplete="off"
                  placeholder="请输入名称" clearable
                  show-word-limit maxlength="20">
        </el-input>
      </el-form-item>

      <el-form-item v-if="currentStepIndex === 0" label="菜系" prop="category">
        <el-select v-model="foodStore.currentRecipe.category"
                   placeholder="请选择或输入菜系" allow-create filterable>
          <el-option v-for="(item, index) in foodCategoryList"
                     :key="index" :label="item" :value="item"/>
        </el-select>
      </el-form-item>

      <el-form-item v-if="currentStepIndex === 0" label="推荐" prop="recommendRate">
        <el-rate v-model="foodStore.currentRecipe.recommendRate"
                 :colors="foodStore.rateColorList"/>
      </el-form-item>

      <el-form-item v-if="currentStepIndex === 0" label="共享">
        <el-radio-group v-model="foodStore.currentRecipe.isShare">
          <el-radio :value="false">否</el-radio>
          <el-radio :value="true">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="currentStepIndex === 0" label="备注">
        <el-input v-model="foodStore.currentRecipe.remark" autocomplete="off"
                  placeholder="请输入备注" clearable
                  type="textarea" :rows="3"
                  show-word-limit maxlength="50">
        </el-input>
      </el-form-item>

      <el-form-item v-if="currentStepIndex === 1" label="食材">
        <food-material-form />
      </el-form-item>

      <el-form-item v-if="currentStepIndex === 2" label="步骤">
        <food-step-form />
      </el-form-item>
    </el-form>

    <div class="button-container">
      <el-button v-if="currentStepIndex !== 0"
                 type="primary" @click="currentStepIndex--">上一步</el-button>
      <el-button v-if="currentStepIndex !== 2"
                 type="primary" @click="currentStepIndex++">下一步</el-button>
      <el-button v-if="currentStepIndex === 2"
                 type="primary" @click="confirmClick">确认</el-button>
      <el-button type="info" @click="cancelClick">取消</el-button>
    </div>

    <food-material-dialog />
    <food-step-dialog />
  </div>
</template>

<script lang="ts" setup>
import FoodMaterialForm from '@/components/Food/FoodMaterialForm.vue'
import FoodStepForm from '@/components/Food/FoodStepForm.vue'
import FoodMaterialDialog from '@/components/Food/FoodMaterialDialog.vue'
import FoodStepDialog from '@/components/Food/FoodStepDialog.vue'
import { useFoodStore } from '@/store/food'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive } from 'vue'
import { foodRules } from '@/utils/element/elRules'

const rules = reactive<FormRules>(foodRules)
const formRef = ref<FormInstance>()
const foodStore = useFoodStore()

const foodCategoryList = ['家常菜', '淮扬菜', '甜点', '其他']

const currentStepIndex = ref(0)

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(() => {
    foodStore.handleRecipeApi(foodStore.currentRecipe)
    history.back()
  })
}

const cancelClick = () => {
  history.back()
}
</script>

<style lang="scss">
.food-recipe-form {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .button-container {
    align-self: center;
  }
}
</style>
